<template>
  <div>
    <el-card>
      <!--添加按钮 -->
      <el-row :gutter="20">
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-edit" @click="isAddGoodsCate"
            >添加商品</el-button
          >
        </el-col>
      </el-row>
      <!-- 用户信息表格 -->
      <el-row>
        <tree-table :data="allGoodsCateList.goodsCateList" :expand-type="false" :selection-type="false" show-index class="treetable" index-text="#" stripe border :show-row-hover="false" :columns="columns">
            <template v-slot:isok="scope">
              <i
                class="el-icon-error"
                v-if="scope.row.cat_deleted"
                style="color: red"
              ></i>
              <i class="el-icon-success" v-else style="color: lightgreen"></i>
            </template>
            <template v-slot:order="scope">
              <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
              <el-tag type="success" v-else-if="scope.row.cat_level === 1"
                >二级</el-tag
              >
              <el-tag v-else type="warning">三级</el-tag>
            </template>
            <template v-slot:opt="scope">
              <el-button
                @click="isChangeGoodsCate(scope.row)"
                type="primary"
                icon="el-icon-edit"
                size="small"
                >编辑</el-button
              >
              <el-button
                @click="delGoodsCate(scope.row)"
                type="danger"
                icon="el-icon-delete"
                size="small"
                >删除</el-button
              >
            </template>
        </tree-table>
      </el-row>
      <el-row>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pagenum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="allGoodsCateList.total"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <changeGoodsCateBox
      @changeGoodsCateDrive="getGoodsCateInfo"
      ref="changedialog"
    ></changeGoodsCateBox>
  </div>
</template>

<script>
// 这个页面需要安装一个 yarn add vue-table-with-tree-grid 插件
import changeGoodsCateBox from '@/components/Goods/CategoriesView/changeGoodsCateBox.vue'
import { getGoodsCateInfoApi, delGoodsCateApi } from '@/Utils/Api/gitGoodsInfoApi'
export default {
  name: 'CategoriesView',
  data () {
    return {
      pageInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      allGoodsCateList: {
        goodsCateList: [],
        total: 0
      },
      // 为table指定列的定义
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name'
        },
        {
          label: '是否有效',
          // 表示,将当前列定义为模板列
          type: 'template',
          // 表示当前这一列使用模板名称
          template: 'isok'
        },
        {
          label: '排序',
          // 表示,将当前列定义为模板列
          type: 'template',
          // 表示当前这一列使用模板名称
          template: 'order'
        },
        {
          label: '操作',
          // 表示,将当前列定义为模板列
          type: 'template',
          // 表示当前这一列使用模板名称
          template: 'opt'
        }
      ]
    }
  },
  components: {
    changeGoodsCateBox
  },
  created () {
    this.getGoodsCateInfo()
  },
  mounted () {},
  methods: {
    // 添加商品zz
    isAddGoodsCate () {
      this.$nextTick(() => {
        this.$refs.changedialog.dialogVisible = true
        this.$refs.changedialog.viewStatus = true
      })
    },
    // 修改商品
    isChangeGoodsCate (row) {
      this.$nextTick(() => {
        this.$refs.changedialog.dialogVisible = true
        this.$refs.changedialog.goodsCateId = row.cat_id
        this.$refs.changedialog.viewStatus = false
      })
    },
    // 获得所有商品信息列表
    async getGoodsCateInfo () {
      this.searchStatus = true
      try {
        const { data } = await getGoodsCateInfoApi(this.pageInfo)
        console.log(data)
        if (data.meta.status === 200) {
          this.allGoodsCateList.goodsCateList = data.data.result
          this.allGoodsCateList.total = data.data.total
          this.$message({
            type: 'success',
            message: '表单数据已更新'
          })
          this.searchStatus = false
        } else {
          return this.$message({
            type: 'error',
            message: '表单获取失败'
          })
        }
      } catch (error) {
        return console.log(error)
      }
    },
    // 删除商品信息
    async delGoodsCate (row) {
      const confirmRus = await this.$confirm('此操作将永久删除该商品分类?', '警告!', {
        distinguishCancelAndClose: true,
        confirmButtonText: '删除',
        cancelButtonText: '取消删除'
      }).catch((err) => err)
      console.log(confirmRus)
      if (confirmRus !== 'confirm') {
        return this.$message({
          type: 'info',
          message: '用户取消了删除'
        })
      }
      const { data } = await delGoodsCateApi(row.cat_id
      )
      console.log(data)
      if (data.meta.status !== 200) {
        return this.$message({
          type: 'error',
          message: data.meta.msg
        })
      }
      this.getGoodsCateInfo()
      this.$message({
        type: 'success',
        message: data.meta.msg
      })
    },
    // 分页
    handleSizeChange (val) {
      this.pageInfo.pagesize = val
      this.getGoodsCateInfo()
    },
    handleCurrentChange (val) {
      this.pageInfo.pagenum = val
      this.getGoodsCateInfo()
    }
  },
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped>
.treetable {
  margin-top: 15px;
}
</style>
